import React, {useEffect, useState} from "react";
import {Modal, Form, Input, Radio, message} from "antd";

import Avatar from "@/pages/users/components/userInfo/components/uploadAvatar";
import RegionSelect from "@/pages/users/components/userInfo/components/regionSelect";

const UserModal = (props: any) => {
  const [form] = Form.useForm()
  const {visible, record, closeHandler, onFinish, setAvatar, setAddress} = props
  const [avatarUrl, setAvatarUrl] = useState(undefined)
  const [addressStr, setAddressStr] = useState(undefined)

  useEffect(() => {
    if(record === undefined) {
      form.resetFields()
    } else {
      form.setFieldsValue(record)
    }
  }, [visible])

  const onOk = () => {
    if(avatarUrl === undefined){
      message.error("头像未上传")
    } else {
      setAvatar(avatarUrl)
      setAddress(addressStr)
      form.submit();
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      <Modal
        title="添加用户"
        visible={visible}
        onOk={onOk}
        onCancel={closeHandler}
        forceRender
        okText={"确定"}
        cancelText={"取消"}
      >
        <Form name="修改信息"
              form={form}
              labelCol={{span: 3}}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              okText="确定"
              cancelText="取消"
        >
          <Form.Item label="用户名" name="userName" rules={[{ required: true, message: '请输入用户名!' }]}>
            <Input/>
          </Form.Item>
          <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名!' }]}>
            <Input/>
          </Form.Item>
          <Form.Item label="性别" name="gender" rules={[{ required: true, message: '请选择性别!' }]}>
            <Radio.Group>
              <Radio value="男">男</Radio>
              <Radio value="女">女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="电话" name="phone" rules={[{ required: true, message: '请输入电话号码' }, {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码!'}]}>
            <Input addonBefore={(<span>+86</span>)} style={{ width: '100%' }}/>
          </Form.Item>
          <Form.Item label="邮箱" name="email"
                     rules={[
                       {
                         type: 'email',
                         message: '请输入正确的邮箱',
                       },
                       {
                         required: true,
                         message: '请输入邮箱',
                       },
                     ]}
          >
            <Input/>
          </Form.Item>
          <Form.Item label="描述" name="description" rules={[{ required: true, message: '请输入!' }]}>
            <Input/>
          </Form.Item>
          <Form.Item label="地址">
            <RegionSelect setAddressStr={setAddressStr}/>
          </Form.Item>
          <Form.Item label="头像" name="avatar" rules={[{ required: true, message: '请上传头像!' }]}>
            <Avatar setAvatarUrl={setAvatarUrl}/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default UserModal
